<template>
    <div class="e-table">
        <div class="top">
            <div class="left">
                <div class="listTop">
                    <el-button
                        size="small"
                        class="btn-greenYellow"
                        @click="importData"
                    >
                        导出</el-button>
                </div>
            </div>
        </div>
        <el-table
            :max-height="$store.state.tableHeight"
            class="table"
            :data="tableData"
            border
            style="width: 100%"
            :height="tableHeight"
            ref="planTable"
            v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'planTable' }"
        >
            <el-table-column show-overflow-tooltip prop="equipmentName" label="设备名称" min-width="200">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="specificationModel" label="规格型号" width="200">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="unit" label="单位" width="200">
            </el-table-column>
            <el-table-column prop="timeUnit" label="计时单位" width="120">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="serviceTime" label="预计使用时间" width="180">
            </el-table-column>
            <el-table-column prop="quantity" label="数量" width="120">
            </el-table-column>
            <el-table-column prop="price" label="租赁单价（元）" width="150">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="enterExitCost" label="预计进退场费用（元）" width="170">
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="amount" label="金额（元）" width="150">
            </el-table-column>
        </el-table>
        <ComPagination
            :total="totalPage"
            :pageSize.sync="pagination.limit"
            :currentPage.sync="pagination.page"
            @currentChange="listByEntity"
            @sizeChange="listByEntity"
            class="bottomSetting"
        />
    </div>
</template>

<script>
import request from '@/api/equip/equipPlan.js'
import ComPagination from '@/components/pagination/pagination.vue'
import { vueDom, debounce, downloadFile } from '@/utils/common.js'
export default {
    data () {
        return {
            tableData: [],
            pagination: {
                'limit': 10,
                'page': 1
            },
            totalPage: 0, //总页数
            tableHeight: 0,
        }
    },
    components: {
        ComPagination,
    },
    computed: {
    },
    created () {
        this.getList()
    },
    mounted () {
        // table动态高度
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 170
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 170
        }
        window.onresize = debounce(this.fn)
    },
    methods: {
        //获取列表
        getList () {
            request.leaseDtlCollect(this.pagination).then(res=>{
                this.tableData = res.list
                this.totalPage = res.totalCount
            })
        },
        //分页查询
        listByEntity () {
            this.getList()
        },
        //导出数据
        importData () {
            if(this.tableData.length === 0) {
                this.clientPop('err', '当前机构没有可导出的数据！')
                return
            }
            request.leaseDtlImport().then(res=>{
                downloadFile({ data: res, name: '租赁明细汇总.xlsx' })
                this.clientPop('suc', '导出成功')
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.e-table {
    min-height: 97.3vh;
}
</style>
